<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>个人注册</title>
    <link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-register.css"/>
</head>


<body>

<div id="app">
    <div class="register py-container ">
        <div style="height: 90px; padding-top: 10px;">
            <img src="img/logo.png" alt="" width="80" height="80" style="float:left; ">
            <div class="manage-title" style="color: dimgrey; font-size: 25px; margin-top: 30px;">用户注册</div>
        </div>

        <div class="registerArea">
            <h3>注册新用户<span class="go">我有账号，去<a href="login.html" target="_blank">登陆</a></span></h3>
            <div class="info">
                <form class="sui-form form-horizontal">
                    <div class="control-group">
                        <label class="control-label">用户名：</label>
                        <div class="controls">
                            <input type="text" placeholder="请输入你的用户名" v-model="userEntity.username"
                                   class="input-xfat input-xlarge">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">登录密码：</label>
                        <div class="controls">
                            <input type="password" placeholder="设置登录密码" v-model="userEntity.password"
                                   class="input-xfat input-xlarge">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">确认密码：</label>
                        <div class="controls">
                            <input type="password" placeholder="再次确认密码" v-model="password2"
                                   class="input-xfat input-xlarge">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">手机号：</label>
                        <div class="controls">
                            <input type="text" placeholder="请输入你的手机号" v-model="userEntity.phone"
                                   class="input-xfat input-xlarge">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">短信验证码：</label>
                        <div class="controls">
                            <input type="text" placeholder="短信验证码" v-model="userEntity.smscode"
                                   class="input-xfat input-xlarge">
                            <a href="#" @click="sendCode()">获取短信验证码</a>
                        </div>
                    </div>


                    <div class="control-group">
                        <label class="control-label"></label>
                        <div class="controls btn-reg">
                            <a class="sui-btn btn-block btn-xlarge btn-danger"
                               href="#"
                               target="_blank"
                               @click="regist()"
                            >完成注册</a>
                        </div>
                    </div>
                </form>
                <div class="clearfix"></div>
            </div>
        </div>

        <div class="py-container copyright">
            <ul class="helpLink">
                <li>关于我们<span class="space"></span></li>
                <li>联系我们<span class="space"></span></li>
                <li>联系客服<span class="space"></span></li>
                <li>合作招商<span class="space"></span></li>
                <li>商家帮助<span class="space"></span></li>
                <li>营销中心<span class="space"></span></li>
                <li>友情链接<span class="space"></span></li>
                <li>销售联盟<span class="space"></span></li>
                <li>友情链接<span class="space"></span></li>
                <li>隐私政策</li>
            </ul>
            <p>京公网安备 1****002000088号|京ICP证0*****9号|互联网药品信息服务资格证编号(京)-经营性-2014-0008 字第大1*****2号</p>
            <p>京ICP备0*****1号京公网安备1***********2</p>
        </div>
    </div>
</div>

<script type="text/javascript" src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="plugins/vue/vuejs-2.5.16.js"></script>
<script type="text/javascript" src="plugins/vue/axios-0.18.0.js"></script>
<script type="text/javascript" src="plugins/vue/qs.js"></script>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            userEntity: {
                username: '',
                password: '',
                phone: '',
                smscode: ''
            },
            password2: ''
        },
        methods: {
            sendCode: function () {
                if (this.userEntity.phone == null || this.userEntity.phone == "") {
                    alert("请填写手机号码");
                    return;
                }
                axios.get('/user/sendCode?phone=' + this.userEntity.phone)
                    .then(function (response) {
                        //获取服务端响应的结果
                        console.log(response.data);
                        alert(response.data.message);
                    }).catch(function (reason) {
                    console.log(reason);
                });
            },
            regist: function () {
                if (this.userEntity.phone == null || this.userEntity.phone == "") {
                    alert("请填写手机号码");
                    return;
                }
                //比较两次输入的密码是否一致
                if (this.userEntity.password != this.password2) {
                    alert("两次输入密码不一致，请重新输入");
                    this.userEntity.password = "";
                    this.password2 = "";
                    return;
                }

                axios.post('/user/add?smsCode=' + this.userEntity.smscode, this.userEntity)
                    .then(function (response) {
                        //获取服务端响应的结果
                        console.log(response.data);
                        if (response.data.isSuccess) {
                            location.href = "login.html";
                        } else {
                            alert(response.data.message);
                        }
                    }).catch(function (reason) {
                    console.log(reason);
                });
            }
        },
        created: function () {

        }
    });
</script>

</html>